import React from 'react'
import SearchBar from 'components/searchbar'
import Table from 'components/table'
import moment from 'moment'
import { Button, message, Modal } from 'antd'
import { FormModal } from 'components/modalForm'
import { connect } from 'react-redux'
import HttpUtils from "../../utils/http" 
const  {config}  =  require("../../config/config");
import './index.less'

const { confirm } = Modal

@connect(state => ({
  userList: state.userList
}))
export default class User extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tData: [],
      item: {},
      loading: true,
      modalShow: false,
      modalShowEdit: false,
      userList:null
    }
  }

  componentDidMount() {

      HttpUtils.get('/api/user/getAllUsers').then(data =>{
        console.log("data:"+JSON.stringify(data));
        this.setState({
          userList:data.data
        })
      });
  }

  fetchTableData = value => {
   
 
  }


 

  tableHeader = () => {
    return [
      {
        dataIndex: 'id',
        title: 'ID',
        width: 200
      },
      {
        dataIndex: 'name',
        title: '用户名',
        width: 200
      },
      {
        dataIndex: 'phone',
        title: '手机号',
        width: 200
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        width: 200
      },
      {
        dataIndex: 'password',
        title: '密码',
        width: 200
      },
     
    ]
  }

  add = () => {
    this.setState({
      modalShow: true
    })
  }

  onOk = param => {
    message.success('添加成功')
    this.onCancel()
  }

  onCancel = () => {
    this.setState({
      modalShow: false
    })
  }

  onOkEdit = param => {
    this.setState({
      modalShowEdit: false
    })
    message.success('编辑成功')
  }

  onCancelEdit = () => {
    this.setState({
      modalShowEdit: false
    })
  }

  tableAction = (actionKey, item) => {
    if (actionKey === 'edit') {
      this.setState({
        item: item,
        modalShowEdit: true
      })
    } else if (actionKey === 'delete') {
      confirm({
        title: '提示',
        content: '确定删除吗',
        onOk: () => {
          message.success('删除成功')
        },
        onCancel() {}
      })
    }
  }

  fields = () => {
    return [
      {
        label: '用户名',
        type: 'input',
        name: 'name',
        options: {
          rules: [
            {
              required: true,
              message: '用户名必输!'
            }
          ]
        }
      },
      {
        label: '邮箱',
        type: 'input',
        name: 'email',
        options: {
          rules: [
            {
              required: true,
              message: '用户名必输!'
            }
          ]
        }
      },
      {
        label: '手机号',
        type: 'input',
        name: 'phone',
        options: {
          rules: [
            {
              required: true,
              message: '用户名必输!'
            }
          ]
        }
      },
      {
        label: '密码',
        type: 'input',
        name: 'password',
        options: {
          rules: [
            {
              required: true,
              message: '用户名必输!'
            }
          ]
        }
      }
  
    ]
  }

  fieldsEdit = () => {
    const item = this.state.item
    return [
      {
        label: '用户名',
        type: 'input',
        name: 'name',
        items: item.name,
        options: {
          initialValue: item.name,
          rules: [
            {
              required: true,
              message: '用户名必输!'
            }
          ]
        }
      },
      {
        label: '邮箱名',
        type: 'input',
        name: 'email',
        options: {
          initialValue: item.email,
          rules: [
            {
              required: true,
              message: '邮箱名必输!'
            }
          ]
        }
      },
      {
        label: '密码',
        type: 'input',
        name: 'password',
        items: item.password,
        options: {
          initialValue: item.password,
          rules: [
            {
              required: true,
              message: '密码必输!'
            }
          ]
        }
      },
      {
        label: '手机号',
        type: 'input',
        name: 'phone',
        items: item.phone,
        options: {
          initialValue: item.phone,
          rules: [
            {
              required: true,
              message: '手机号必输!'
            }
          ]
        }
      },
    ]
  }

  render() {
    const songArray = []
    let songList = this.state.userList;

  

    if (songList) {
      for (let i = 0; i < songList.length; i++) {
        songArray.push({
          id: songList[i].id,
          name: songList[i].name,
          email: songList[i].email,
          phone: songList[i].phone,
          password: songList[i].password
        })
      }
    }
    return (
      <div id="wrap">
        {/* <SearchBar onSubmit={this.onSearch} fields={this.searchFields()} /> */}
        <div className="tableBox">
          <Button onClick={this.add} className="addButton">
            添加
          </Button>
          <div style={{ paddingTop: 43 }}>
            <Table
              onCtrlClick={this.tableAction}
              pagination={true}
              pageSize={10}
              header={this.tableHeader()}
              data={songArray}
              action={row => [
                {
                  key: 'edit',
                  name: '修改',
                  color: 'blue',
                  icon: 'edit'
                },
                {
                  key: 'delete',
                  name: '删除',
                  color: 'red',
                  icon: 'delete'
                }
              ]}
              scroll={{ y: 385 }}
            />
          </div>
        </div>
        <FormModal
          modalKey="add"
          visible={this.state.modalShow}
          title="添加音乐"
          fields={this.fields()}
          onOk={this.onOk}
          onCancel={this.onCancel}
          okText="保存"
        />
        <FormModal
          modalKey="Edit"
          visible={this.state.modalShowEdit}
          title="修改音乐"
          fields={this.fieldsEdit()}
          onOk={this.onOkEdit}
          onCancel={this.onCancelEdit}
          okText="保存"
        />
      </div>
    )
  }
}
